<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:80%;width: 100%}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8UHgZhYbAHxB5TOzuxU6sFQx9jeKScGx">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
<script type="text/javascript">
  // 用经纬度设置地图中心点
  function changeLocation(longitude, latitude){
    if(longitude != "" && latitude != ""){
      map.clearOverlays();
      var new_point = new BMap.Point(longitude,latitude);

      //http://developer.baidu.com/map/jsdemo/img/car.png 32,70
      var myIcon = new BMap.Icon("UAV.png", new BMap.Size(50, 50), {    //小车图片
      //offset: new BMap.Size(0, -5),    //相当于CSS精灵
      imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
      });
      var marker = new BMap.Marker(new_point,{icon:myIcon});  // 创建标注
      marker.enableDragging();             //设置标注可拖拽
      map.addOverlay(marker);              // 将标注添加到地图中
      map.panTo(new_point);
    }
  }
  // 设置单个点的位置
  function loadSingleLocation(){
    $.ajax({
      url:"http://127.0.0.1:8080/HiBotServer/api/v1/location/id/1",
      type:"get",
      dataType:"json",
      success:function(result){
        var longitude = result.longitude;
        var latitude = result.latitude;
        changeLocation(longitude, latitude);
      },
      error:function(){
        console.log("加载地图位置失败");
      }
    });
  }

  $(function(){
    //window.setInterval(loadSingleLocation, 1000);
  });
</script>
<script type="text/javascript">
    //数据准备,
    var points = [];//原始点信息数组
    var bPoints = [];//百度化坐标数组。用于更新显示范围。
    //添加线
    function addLine(points){
      var linePoints = [],pointsLen = points.length,i,polyline;
      if(pointsLen == 0){
          return;
      }
      // 创建标注对象并添加到地图
      for(i = 0;i <pointsLen;i++){
          linePoints.push(new BMap.Point(points[i].lng,points[i].lat));
      }
      polyline = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});   //创建折线
      map.addOverlay(polyline);   //增加折线
    }
    // 获取随机数
    function getRandom(n){
        return Math.floor(Math.random()*n+1)
    }
    //根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别
    function setZoom(bPoints){
        var view = map.getViewport(eval(bPoints));
        var mapZoom = view.zoom;
        var centerPoint = view.center;
        map.centerAndZoom(centerPoint,mapZoom);
    }
    //在轨迹点上创建图标，并添加点击事件
    function addMarker(points){  // 创建图标对象

        // 创建标注对象并添加到地图
        for(var i = 0,pointsLen = points.length;i <pointsLen;i++){
            var point = new BMap.Point(points[i].lng,points[i].lat);
            var  marker = new BMap.Marker(point);
            map.addOverlay(marker);
            //给标注点添加点击事件。使用立即执行函数和闭包
            (function() {
                var thePoint = points[i];
                marker.addEventListener("click",function(){
                    showInfo(this,thePoint);
                });
            })();
        }
    }
    //随机生成新的点，加入到轨迹中。
    function dynamicLine(){
          // 设置单个点的不同时刻的位置，并且连成一条线
          $.ajax({
            url:"http://127.0.0.1:8080/HiBotServer/api/v1/location/list/id/1",
            type:"get",
            dataType:"json",
            success:function (result){
              for(var i = 0; i < result.length; i++){
                var lng = result[i].longitude;
                var lat = result[i].latitude;
                //var id = getRandom(1000);
                //var point = {"lng":lng,"lat":lat,"status":1,"id":id}
                var point = {"lng":lng,"lat":lat,"status":1}
                var makerPoints = [];
                var newLinePoints = [];
                var len;

                makerPoints.push(point);
                addMarker(makerPoints);//增加对应该的轨迹点
                points.push(point);
                bPoints.push(new BMap.Point(lng,lat));
                len = points.length;
                newLinePoints = points.slice(len-2, len);//最后两个点用来画线。

                addLine(newLinePoints);//增加轨迹线
                setZoom(bPoints);
                //setTimeout(dynamicLine, 1000);
              }
            },
            error:function(){
              console.log("加载地图位置失败");
            }
          });

    }
    $(function(){
      setTimeout(dynamicLine, 1000);//动态生成新的点。
    });
</script>
</head>

<body>
<div id="container"></div>
<div id="r-result">
		经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
		纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
		<input type="button" value="查询" onclick="theLocation()" />
</div>
<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
<script type="text/javascript">
// 百度地图API功能
function G(id) {
	return document.getElementById(id);
}
var map = new BMap.Map("container");          // 创建地图实例
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom();               // 可以滚轮缩放


//添加城市列表
var size = new BMap.Size(80, 20);
map.addControl(new BMap.CityListControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    offset: size,
    // 切换城市之间事件
    // onChangeBefore: function(){
    //    alert('before');
    // },
    // 切换城市之后事件
    // onChangeAfter:function(){
    //   alert('after');
    // }
}));
//向地图添加带定位的导航控件
var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_LEFT,
    // LARGE类型
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 启用显示定位
    enableGeolocation: true
});
map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e){
  // 定位成功事件
  var address = '';
  address += e.addressComponent.province;
  address += e.addressComponent.city;
  address += e.addressComponent.district;
  address += e.addressComponent.street;
  address += e.addressComponent.streetNumber;
  alert("当前定位地址为：" + address);
});
geolocationControl.addEventListener("locationError",function(e){
  // 定位失败事件
  alert(e.message);
});
map.addControl(geolocationControl);
//添加比例尺控件
map.addControl(new BMap.ScaleControl());
//缩略图
//map.addControl(new BMap.OverviewMapControl());
var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
map.addControl(overViewOpen)
map.addControl(new BMap.MapTypeControl());
//map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用


// 用经纬度设置地图中心点
function theLocation(){
	if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
		map.clearOverlays();
		var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);

    var myIcon = new BMap.Icon("UAV.png", new BMap.Size(500, 500), {    //小车图片
		//offset: new BMap.Size(0, -5),    //相当于CSS精灵
		imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  });
		var marker = new BMap.Marker(new_point,{icon:myIcon});  // 创建标注
    marker.enableDragging();             //设置标注可拖拽
		map.addOverlay(marker);              // 将标注添加到地图中
		map.panTo(new_point);
	}
}

//智能搜索
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId"
		,"location" : map
	});

ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
var str = "";
	var _value = e.fromitem.value;
	var value = "";
	if (e.fromitem.index > -1) {
		value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	}
	str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

	value = "";
	if (e.toitem.index > -1) {
		_value = e.toitem.value;
		value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	}
	str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
	G("searchResultPanel").innerHTML = str;
});

var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
var _value = e.item.value;
	myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

	setPlace();
});

function setPlace(){
	map.clearOverlays();    //清除地图上所有覆盖物
	function myFun(){
		var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
		map.centerAndZoom(pp, 18);
		map.addOverlay(new BMap.Marker(pp));    //添加标注
	}
	var local = new BMap.LocalSearch(map, { //智能搜索
	  onSearchComplete: myFun
	});
	local.search(myValue);
}

//获取自己的位置 112.97935279,28.21347823
/*var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			alert('您的位置：'+r.point.lng+','+r.point.lat);
		}
		else {
			alert('failed'+this.getStatus());
		}
	},{enableHighAccuracy: true});*/

//window.setTimeout(function(){
//    map.panTo(new BMap.Point(116.409, 39.918));
//}, 2000);
</script>
</body>
</html>
